<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:c="http://java.sun.com/jstl/core"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:dap="http://diamondparking.com"
                xmlns:s="http://jboss.com/products/seam/taglib"
                template="/templates/diamond-parking.xhtml">
    
    <ui:define name="pageTitle">Claims</ui:define>
    
    <ui:define name="pageBody">
        <h:form>
            <h:commandButton value="new"
                             onclick="#{rich:component('mp1')}.show(); return false;"/>
        </h:form>
        <br/>
        <rich:modalPanel id="mp1" width="350" height="400">
            <f:facet name="header">Create Claim</f:facet>
            <h:panelGroup id="claimForm">
                <h:form>
                    <s:decorate id="customerName" template="/templates/form-field.xhtml">
                        <ui:define name="label">Customer Name</ui:define>

                        <rich:comboBox value="#{claimManager.customerName}"
                                       defaultLabel="Enter a customer"
                                       suggestionValues="#{customerNames}"
                                       required="true"
                                       requiredMessage="Customer name required"/>
                    </s:decorate>

                    <s:decorate id="claimLocation" template="/templates/form-field.xhtml">
                        <ui:define name="label">Location Parked</ui:define>

                        <rich:comboBox value="#{claimManager.locationParked}"
                                       defaultLabel="Enter a location"
                                       suggestionValues="#{locations}"
                                       required="true"
                                       requiredMessage="Location required"/>
                    </s:decorate>

                    <s:decorate id="claimParkedBy" template="/templates/form-field.xhtml">
                        <ui:define name="label">Parked By</ui:define>

                        <rich:comboBox value="#{claimManager.parkedBy}"
                                       defaultLabel="Enter an employee"
                                       suggestionValues="#{employees}"
                                       required="true"
                                       requiredMessage="Employee required"/>
                    </s:decorate>
                    
                    <s:decorate id="carLP" template="/templates/form-field.xhtml">
                        <ui:define name="label">License Plate</ui:define>

                        <rich:comboBox id="lpBox2"
                                       value="#{claimManager.licensePlate}"
                                       defaultLabel="Enter an license plate"
                                       suggestionValues="#{cars}"
                                       required="true"
                                       requiredMessage="License required"/>
                    </s:decorate>
                    
                    <s:decorate id="carMake" template="/templates/form-field.xhtml">
                        <ui:define name="label">Make</ui:define>

                        <rich:comboBox id="makeBox2"
                                       value="#{claimManager.make}"
                                       defaultLabel="Enter a make"
                                       suggestionValues="#{makes}"/>
                    </s:decorate>

                    <s:decorate id="carColor" template="/templates/form-field.xhtml">
                        <ui:define name="label">Color</ui:define>

                        <rich:comboBox id="colorBox2"
                                       value="#{claimManager.color}"
                                       defaultLabel="Enter a color">
                            <s:enumItem enumValue="Black" label="Black"/>
                            <s:enumItem enumValue="Blue" label="Blue"/>
                            <s:enumItem enumValue="Green" label="Green"/>
                            <s:enumItem enumValue="Gold" label="Gold"/>
                            <s:enumItem enumValue="Gray" label="Gray"/>
                            <s:enumItem enumValue="Red" label="Red"/>
                            <s:enumItem enumValue="Yellow" label="Yellow"/>
                            <s:enumItem enumValue="White" label="White"/>
                        </rich:comboBox>
                    </s:decorate>

                    <s:decorate id="claimCarWash" template="/templates/form-field.xhtml">
                        <ui:define name="label">Car Wash</ui:define>

                        <h:selectOneRadio  value="#{claimManager.carWash}" required="true">
                            <f:selectItem itemValue="true" itemLabel="Yes"/>
                            <f:selectItem itemValue="false" itemLabel="No"/>
                        </h:selectOneRadio>
                    </s:decorate>

                    <s:decorate id="claimComments" template="/templates/form-field.xhtml">
                        <ui:define name="label">Comments</ui:define>

                        <h:inputTextarea value="#{claimManager.comments}"/>
                    </s:decorate>

                    <s:decorate id="claimDamageReport" template="/templates/form-field.xhtml">
                        <ui:define name="label">Damage Report</ui:define>

                        <h:inputTextarea value="#{claimManager.damageReport}"/>
                    </s:decorate>

                    <h:commandButton value="Create" action="#{claimManager.create}"/>
                    &#160;
                    <h:commandButton value="Cancel" action="#{claimManager.clear}" immediate="true"/>
                </h:form>
            </h:panelGroup>
        </rich:modalPanel>

        <rich:modalPanel id="mp2" width="350" height="400">
            <f:facet name="header">Edit Claim</f:facet>
            <h:panelGroup id="editForm" style="position: relative;">
                <h:form>
                    <s:decorate id="customerName" template="/templates/form-field.xhtml">
                        <ui:define name="label">Customer Name</ui:define>

                        <rich:comboBox value="#{claimHome.instance.customer}"
                                       defaultLabel="Enter a customer"
                                       suggestionValues="#{customerNames}"
                                       required="true"
                                       immediate="true"
                                       requiredMessage="Customer name required"/>
                    </s:decorate>
                    
                    <s:decorate id="claimLocation" template="/templates/form-field.xhtml">
                        <ui:define name="label">Location Parked</ui:define>

                        <rich:comboBox value="#{claimHome.instance.location}"
                                       defaultLabel="Enter a location"
                                       required="true"
                                       requiredMessage="Location required"/>
                    </s:decorate>

                    <s:decorate id="claimParkedBy" template="/templates/form-field.xhtml">
                        <ui:define name="label">Parked By</ui:define>

                        <rich:comboBox value="#{claimHome.instance.parkedBy}"
                                       defaultLabel="Enter an employee"
                                       required="true"
                                       requiredMessage="Employee required"/>
                    </s:decorate>
                    
                    <s:decorate id="carLP" template="/templates/form-field.xhtml">
                        <ui:define name="label">License Plate</ui:define>

                        <rich:comboBox id="lpBox2"
                                       value="#{claimHome.instance.car.licensePlate}"
                                       defaultLabel="Enter an license plate"
                                       required="true"
                                       requiredMessage="License required"/>
                    </s:decorate>
                    
                    <s:decorate id="carMake" template="/templates/form-field.xhtml">
                        <ui:define name="label">Make</ui:define>

                        <rich:comboBox id="makeBox2"
                                       value="#{claimHome.instance.car.make}"
                                       defaultLabel="Enter a make"/>
                    </s:decorate>

                    <s:decorate id="carColor" template="/templates/form-field.xhtml">
                        <ui:define name="label">Color</ui:define>

                        <rich:comboBox id="colorBox2"
                                       value="#{claimHome.instance.car.color}"
                                       defaultLabel="Enter a color"
                                       immediate="true">
                            <s:enumItem enumValue="Black" label="Black"/>
                            <s:enumItem enumValue="Blue" label="Blue"/>
                            <s:enumItem enumValue="Green" label="Green"/>
                            <s:enumItem enumValue="Gold" label="Gold"/>
                            <s:enumItem enumValue="Gray" label="Gray"/>
                            <s:enumItem enumValue="Red" label="Red"/>
                            <s:enumItem enumValue="Yellow" label="Yellow"/>
                            <s:enumItem enumValue="White" label="White"/>
                        </rich:comboBox>
                    </s:decorate>

                    <s:decorate id="claimCarWash" template="/templates/form-field.xhtml">
                        <ui:define name="label">Car Wash</ui:define>

                        <h:selectOneRadio value="#{claimHome.instance.carWash}" required="true"
                                       immediate="true">
                            <f:selectItem itemValue="true" itemLabel="Yes"/>
                            <f:selectItem itemValue="false" itemLabel="No"/>
                        </h:selectOneRadio>
                    </s:decorate>

                    <s:decorate id="claimComments" template="/templates/form-field.xhtml">
                        <ui:define name="label">Comments</ui:define>

                        <h:inputTextarea value="#{claimHome.instance.comments}"
                                        immediate="true"/>
                    </s:decorate>

                    <s:decorate id="claimDamageReport" template="/templates/form-field.xhtml">
                        <ui:define name="label">Damage Report</ui:define>

                        <h:inputTextarea value="#{claimHome.instance.damageReport}"
                                         immediate="true"/>
                    </s:decorate>
                    
                    
                    <h:commandButton value="Save" action="#{claimHome.update}" immediate="true"/>
                    &#160;
                    <h:commandButton value="Delete" action="#{claimHome.remove}" immediate="true"/>
                    &#160;
                    <h:commandButton value="Cancel" onclick="#{rich:component('mp2')}.hide(); return false;"/>

                </h:form>
            </h:panelGroup>
        </rich:modalPanel>

        <rich:messages errorStyle="color: red;"/>
        <h:panelGrid columns="2" style="width: 100%;">
            <h:panelGroup>
                <style>
                    .form-field > label {
                    width: 85px;
                    }
                </style>
                <h:form>
                    <dap:formField>
                        <ui:define name="label">From</ui:define>
                        <rich:calendar value="#{searcher.from}"
                                       enableManualInput="true"
                                       mode="client"
                                       datePattern="M/dd/yy hh:mm a"
                                       showApplyButton="true"/>
                    </dap:formField>

                    <dap:formField>
                        <ui:define name="label">To</ui:define>
                        <rich:calendar value="#{searcher.to}"
                                       enableManualInput="true"
                                       mode="client"
                                       datePattern="M/dd/yy hh:mm a"
                                       showApplyButton="true"/>
                    </dap:formField>

                    <dap:formField>
                        <ui:define name="label">Claim #</ui:define>
                        <h:inputText value="#{searcher.claimId}"
                                     converterId="java.faces.Long">
                             <f:convertNumber minIntegerDigits="6" groupingUsed="false"/>
                         </h:inputText>
                    </dap:formField>

                    <dap:formField>
                        <ui:define name="label">Customer</ui:define>
                        <rich:comboBox value="#{searcher.claimCustomer}"
                                       suggestionValues="#{customerNames}"
                                       defaultLabel="Enter a customer"/>
                    </dap:formField>

                    <dap:formField>
                        <ui:define name="label">Location</ui:define>
                        <rich:comboBox value="#{searcher.locationStall}"
                                       defaultLabel="Enter a location"
                                       suggestionValues="#{locations}"/>
                    </dap:formField>

                    <dap:formField>
                        <ui:define name="label">Parked By</ui:define>
                        <rich:comboBox value="#{searcher.parkedByUsername}"
                                       defaultLabel="Enter an employee"
                                       suggestionValues="#{employees}"/>
                    </dap:formField>

                    <dap:formField>
                        <ui:define name="label">Car Wash</ui:define>
                        <rich:comboBox value="#{searcher.claimCarWash}"
                                       defaultLabel="Select choice">
                            <f:selectItem itemValue="Yes" itemLabel="Yes"/>
                            <f:selectItem itemValue="No" itemLabel="No"/>
                        </rich:comboBox>
                    </dap:formField>
                    <script>
                        function setMakeAndColorEnablement() {
                            if (#{rich:component('lpBox')}.field.value != '' &amp;&amp; #{rich:component('lpBox')}.field.value != 'Enter a license #') {
                                disableMakeAndColor();
                            } else {
                                enableMakeAndColor();
                            }
                        }

                        function disableMakeAndColor() {
                            toggleComboBox(#{rich:component('makeBox')}, false);
                            toggleComboBox(#{rich:component('colorBox')}, false)
                        }

                        function enableMakeAndColor() {
                            toggleComboBox(#{rich:component('makeBox')}, true);
                            toggleComboBox(#{rich:component('colorBox')}, true)
                        }

                        function toggleComboBox(component, enabled) {
                            toggleEnabled(component.field, enabled);
                            toggleEnabled(component.button, enabled);
                        }

                        function toggleEnabled(elem, enabled) {
                            elem.disabled = !enabled;
                            elem.style.backgroundColor = enabled ? 'white' : 'lightGray';
                        }
                    </script>
                    <dap:formField>
                        <ui:define name="label">License #</ui:define>
                        <rich:comboBox id="lpBox"
                                       value="#{searcher.licensePlateNumber}"
                                       onblur="setMakeAndColorEnablement();"
                                       defaultLabel="Enter a license #"
                                       suggestionValues="#{licensePlateNumbers}"/>
                    </dap:formField>
                    
                    <dap:formField>
                        <ui:define name="label">Make</ui:define>
                        <rich:comboBox id="makeBox"
                                       value="#{searcher.makeName}"
                                       defaultLabel="Enter a make"
                                       suggestionValues="#{makes}"/>
                    </dap:formField>
                    
                    <dap:formField>
                        <ui:define name="label">Color</ui:define>
                        <rich:comboBox id="colorBox"
                                       value="#{searcher.color}"
                                       defaultLabel="Enter a color">
                            <s:enumItem enumValue="Black" label="Black"/>
                            <s:enumItem enumValue="Blue" label="Blue"/>
                            <s:enumItem enumValue="Green" label="Green"/>
                            <s:enumItem enumValue="Gold" label="Gold"/>
                            <s:enumItem enumValue="Gray" label="Gray"/>
                            <s:enumItem enumValue="Red" label="Red"/>
                            <s:enumItem enumValue="Yellow" label="Yellow"/>
                            <s:enumItem enumValue="White" label="White"/>
                       </rich:comboBox>
                    </dap:formField>
                    <script>setMakeAndColorEnablement();</script>
                    <h:commandButton value="Search"/>
                </h:form>
            </h:panelGroup>

            <h:panelGroup style="width: 460px; display: block; float: right;">
                <rich:panel style="width: 100%; height: 350px; overflow-y: scroll;" layout="block">
                    <style>
                        td {
                        vertical-align: top;
                        }
                    </style>
                    <div class="data">
                        <h:outputText value="No results" rendered="#{empty searcher.results}"/>
                        <h:panelGroup rendered="#{not empty searcher.results}">
                            <rich:dataTable value="#{searcher.results}" var="currClaim" style="width: 100%;">
                                <f:facet name="header">
                                    <rich:columnGroup>
                                        <rich:column>
                                            <h:outputText value="Claim #"/>
                                        </rich:column>
                                        
                                        <rich:column>
                                            <h:outputText value="License #"/>
                                        </rich:column>

                                        <rich:column>
                                            <h:outputText value="Customer"/>
                                        </rich:column>
                                        
                                        <rich:column>
                                            <h:outputText value="Entered"/>
                                        </rich:column>

                                        <rich:column>
                                            <h:outputText value=""/>
                                        </rich:column>
                                    </rich:columnGroup>
                                </f:facet>

                                <rich:column>
                                    <h:form>
                                        <a4j:commandLink action="#{claimHome.setId(currClaim.id)}"
                                                         reRender="editForm"
                                                         oncomplete="#{rich:component('mp2')}.show()">
                                            <h:outputText value="#{currClaim.id}">
                                                <f:convertNumber minIntegerDigits="6" groupingUsed="false"/>
                                            </h:outputText>
                                        </a4j:commandLink>
                                    </h:form>
                                </rich:column>

                                <rich:column>
                                    <h:outputText value="#{currClaim.car.licensePlate}"/>
                                </rich:column>

                                <rich:column>
                                    <h:outputText value="#{currClaim.customer}"/>
                                </rich:column>
                                
                                <rich:column>
                                    <h:outputText value="#{currClaim.entered}">
                                        <f:convertDateTime pattern="M/dd/yy hh:mm a"/>
                                    </h:outputText>
                                </rich:column>

                                <rich:column style="width: 45px;">
                                    <h:form style="width: 100%; text-align: center;">
                                        <h:commandButton value="X" action="#{searcher.results.remove(currClaim)}"/>
                                    </h:form>
                                </rich:column>
                            </rich:dataTable>
                        </h:panelGroup>
                    </div>
                </rich:panel>
                <br/>
                <s:button value="Print" view="/claims/print.xhtml" propagation="none" rendered="#{not empty searcher.results}"/>
            </h:panelGroup>
        </h:panelGrid>
    </ui:define>
    
</ui:composition>
